<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { getReportDetailApi, getWeekReportApi } from '@/services/report'
//import heatChart from '@/components/heat-chart.vue'
//import pressureChart from '@/components/pressure-chart.vue'
import { useReportStore } from '@/stores'
//import dashBoardChart from '@/components/dashBoard-chart.vue'
import polyLineChart from '@/components/polyline-chart.vue'
//import sleepStageChart from '@/components/sleepStage-chart.vue'
const list = ref(['日报', '周报'])
const curNow = ref(0)
const reportStore = useReportStore()
const props = defineProps<{
  id: string
  date: string
}>()
const render = ref(true)
const weekRender = ref(true)
const back = () => {
  uni.navigateBack()
}
const sectionChange = (e: any) => {
  curNow.value = e
}
const AHI = ref('')
const heartIndex = ref(0)
//初始化日期为昨天 显示年月日
const yesterday = new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
//getMonth获取的是月份索引
const handledate = (date: any) => {
  const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
  return date.getFullYear() + '-' + month + '-' + date.getDate()
}
const nowdate = ref('')
const nowWeek = ref('')
const weekText = ref('')
const calendar = ref()
const endDate = ref('')

//打开日历弹框
const open = () => {
  calendar.value.open()
}
//设置报告日期
const confirm = async (e: any) => {
  const res = await getReportDetailApi({
    date: e.year + '-' + e.month + '-' + e.date,
    mtrlId: props.id,
  })
  reportStore.setReport(res.data)
  nowdate.value = e.year + '-' + e.month + '-' + e.date
  //console.log(nowdate.value)
}
//日期向前一天
const DayBefore = async () => {
  const date = new Date(nowdate.value)
  const theDayBefore = new Date(date.getTime() - 24 * 60 * 60 * 1000)
  console.log(theDayBefore)
  const res = await getReportDetailApi({
    date: handledate(theDayBefore),
    mtrlId: props.id,
  })
  reportStore.setReport(res.data)
  nowdate.value = handledate(theDayBefore)
}
//日期向后一天
const DayAfter = async () => {
  const date = new Date(nowdate.value)
  const theDayAfter = new Date(date.getTime() + 24 * 60 * 60 * 1000)
  if (theDayAfter.getTime() > yesterday.getTime()) {
    uni.showToast({
      title: '只能显示到昨天的报告哦',
      icon: 'none',
      duration: 2000,
    })
    return
  }
  const res = await getReportDetailApi({
    date: handledate(theDayAfter),
    mtrlId: props.id,
  })
  reportStore.setReport(res.data)
  nowdate.value = handledate(theDayAfter)
}
//设置周报日期
const confirmweek = async (e: any) => {
  const res = await getWeekReportApi({
    date: e.year + '-' + e.month + '-' + e.date,
    mtrlId: props.id,
  })
  reportStore.setWeekReport(res.data)
  nowWeek.value = e.year + '-' + e.month + '-' + e.date
}
//处理周报显示格式为0x月0x-0x月0x,nowWeek往前七天为起始日期
const handledateweek = () => {
  console.log(nowWeek.value)
  const startdate = new Date(new Date(nowWeek.value).getTime() - 6 * 24 * 60 * 60 * 1000)
  console.log(startdate)
  weekText.value =
    handledate(startdate).slice(5, 7) +
    '月' +
    handledate(startdate).slice(8, 10) +
    '-' +
    nowWeek.value.slice(5, 7) +
    '月' +
    nowWeek.value.slice(8, 10)
  console.log(weekText.value)
}

watch(
  () => nowWeek.value,
  (newVal) => {
    handledateweek()
  },
)
const WeekendBefore = async () => {
  const date = new Date(nowWeek.value)
  const theDayBefore = new Date(date.getTime() - 24 * 60 * 60 * 1000)
  const res = await getWeekReportApi({
    date: handledate(theDayBefore),
    mtrlId: props.id,
  })
  reportStore.setWeekReport(res.data)
  nowWeek.value = handledate(theDayBefore)
}
const WeekendAfter = async () => {
  const date = new Date(nowWeek.value)
  const theDayAfter = new Date(date.getTime() + 24 * 60 * 60 * 1000)
  if (theDayAfter.getTime() > yesterday.getTime()) {
    uni.showToast({
      title: '只能显示到昨天的报告哦',
      icon: 'none',
      duration: 2000,
    })
    return
  }
  const res = await getWeekReportApi({
    date: handledate(theDayAfter),
    mtrlId: props.id,
  })
  reportStore.setWeekReport(res.data)
  nowWeek.value = handledate(theDayAfter)
}
onMounted(async () => {
  nowdate.value = handledate(yesterday)
  nowWeek.value = nowdate.value
  endDate.value = nowdate.value
  if (!reportStore.report) {
    console.log('没有报告')
    render.value = false
  } else {
    render.value = true
    //score.value = reportStore.report?.monitorInfo.slpQua as number
    AHI.value = reportStore.report?.breathEvent.totalAHI as string
    heartIndex.value = reportStore.report?.heartHealthIndex.index as number
  }
  if (!reportStore.wreport) {
    weekRender.value = false
  } else {
    weekRender.value = true
  }
})

watch(
  () => reportStore.report,
  async (newReport) => {
    //console.log('报告详情发生变化', newReport)
    //如果没有数据销毁之前的图表
    if (!newReport) {
      render.value = false
      console.log('销毁图表')
    }
    if (newReport) {
      render.value = true
      AHI.value = newReport.breathEvent.totalAHI as string
      heartIndex.value = newReport.heartHealthIndex.index as number
      /* 
      dashBoardoption.value.series[0].data[0].value = score.value
      console.log('仪表盘', dashBoardoption.value.series[0].data[0].value)
      console.log('AHI', AHI.value)
      console.log('心血管健康指数', heartIndex.value)
      const dashBoardchart = await dashBoard.value.init(echarts)
      dashBoardchart.setOption(dashBoardoption.value) */
    }
  },
  {
    deep: true,
  },
)
watch(
  () => reportStore.wreport,
  async (newReport) => {
    if (!newReport) {
      weekRender.value = false
    }
    if (newReport) {
      weekRender.value = true
    }
  },
  {
    deep: true,
  },
)
</script>

<template>
  <view class="content">
    <!-- <view class="switch">
      <u-subsection :list="list" mode="button" :current="curNow" @change="sectionChange"></u-subsection>
    </view> -->
    <view>
      <!-- <uni-calendar ref="calendar" :insert="false" @confirm="confirmweek" :end-date="endDate" :date="nowWeek" /> -->
      <!-- <view class="date">
        <img src="@/static/向左.svg" alt="" class="arrow" @click="WeekendBefore" />
        <view @click="open">
          {{ weekText }}
          <img src="@/static/下箭头.svg" alt="" class="down-arrow" />
        </view>
        <img src="@/static/向右.svg" alt="" class="arrow" @click="WeekendAfter" />
      </view> -->
      <view v-if="weekRender">
        <polyLineChart :type="'heartIndex'"></polyLineChart>
        <polyLineChart :type="'AHI'"></polyLineChart>
        <polyLineChart :type="'morningPulse'"></polyLineChart>
      </view>
      <view v-else class="noWeekData"> 暂无周报数据 </view>
    </view>
  </view>
</template>
<style lang="scss">
//scoped会自动添加上data类，会导致排版混乱，小程序渲染会自动防止样式穿透
page {
  font-family: PingFangSC-regular;
  .content {
    display: flex;
    flex-direction: column;
    position: relative;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
      display: none;
    }
    /* .navbar {
      position: fixed;
      width: 100%;
      height: 180.769rpx;
      background: url(@/static/starry2.png) no-repeat;
      background-size: contain;
      box-sizing: border-box;
      z-index: 999;
      .title {
        margin-top: 115.385rpx;
        margin-bottom: 28.846rpx;
        font-size: 34.615rpx;
        color: #ffff;
        text-align: center;
        .u-icon {
          position: absolute;
          left: 3%;
        }
      }
    } */
    .switch {
      width: 651.923rpx;
      margin: 200rpx auto 28.846rpx;
    }
    .date {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 651.923rpx;
      margin: 0 auto;
      .arrow {
        width: 46.154rpx;
        height: 46.154rpx;
      }
      .down-arrow {
        width: 21.154rpx;
        height: 21.154rpx;
      }
    }
    //修改今天的日期的数字和汉字颜色
    .uni-calendar-item--isDay-text {
      color: #c0c0c0;
    }
    .uni-calendar-item__weeks-lunar-text {
      color: #c0c0c0;
    }
    //不显示返回今天键
    .uni-calendar__backtoday {
      display: none;
    }
    .dashbord {
      width: 650rpx;
      margin: 0 auto;
      height: 332.692rpx;
    }
    .chart {
      width: 651.923rpx;
      margin: 0 auto;
      height: 567.308rpx;
    }
    .evaluate {
      display: flex;
      align-items: center;
      width: 450rpx;
      height: 105.769rpx;
      font-size: 30.769rpx;
      font-weight: 700;
      background-color: #f9fafc;
      color: #5bd2fd;
      margin: 28.846rpx auto;
      padding: 28.846rpx;
    }
    .index {
      width: 503.846rpx;
      height: 192.308rpx;
      margin: 19.231rpx auto;
      background-color: #ffffff;
      .row {
        display: flex;
        justify-content: space-between;
        height: 95rpx;
        margin-bottom: 6rpx;
        .cell {
          width: 249rpx;
          line-height: 95rpx;
          background-color: #f9fafc;
          text-align: center;
        }
      }
      .question-mark {
        width: 30.769rpx !important;
        height: 30.769rpx !important;
        vertical-align: middle;
      }
    }
    .subtitle {
      display: flex;
      align-items: center;
      font-size: 30.769rpx;
      width: 682.692rpx;
      margin: 0 auto;
      image {
        width: 26.923rpx;
        height: 26.923rpx;
        margin: 19.231rpx;
      }
    }
    .unit {
      font-size: 23.077rpx;
      color: #999999;
      height: 30.769rpx;
      width: 651.923rpx;
      margin: 0 auto 9.615rpx;
    }
    .week-tittle {
      font-size: 30.769rpx;
      width: 682.692rpx;
      margin: 0 auto;
    }
    .week-chart {
      width: 651.923rpx;
      margin: 0 auto;
      height: 538.462rpx;
    }
  }
}
</style>
